.home{
    .banner{
        width: 100%;
        overflow: hidden;
        .site-info{
            text-align: center;
            position: absolute;
            top: 10%;
            padding: 0 .1rem;
            box-sizing: border-box;
            width: 100%;
            .site-title{
                transition: all .3s;
                color: white;
                font-family: TitilliumWeb;
                font-size: 0.6rem;
                font-weight: 700;
                span{
                    padding:0 .05rem;
                    background: rgba($color: #000000, $alpha: .5);
                }
            }
        }
        img{
            max-width: 100%;
            width: 100vw;
            height: 100vh;
            object-fit: cover;
            object-position: center center;
            vertical-align: bottom;
        }
        @keyframes downAndUp {
            0% {
                transform: translateY(0rem);
                opacity: 1;
            }
            50%{
                transform: translateY(.25rem);
                opacity: 0.4;
            }
            100% {
                transform: translateY(0rem);
                opacity: 1;
            }
        }
        .bannerDown{
            width: 100%;
            height: .4rem;
            text-align: center;
            position: absolute;
            top: 88vh;
            color: #fff;
            transform: translateX(-50%);
            cursor: pointer;
            animation:downAndUp 2.6s infinite ease;
            i{
                transition: all .7s;
                font-size: .4rem;
                line-height: .4rem;
            }
        }
    }
    .outer{
        position: relative;
        padding-right: .15rem;
        padding-left: .15rem;
        margin:0 auto;
        min-height: calc(100% - 157px);
        .notice{
            box-sizing: border-box;
            padding: 20px;
            border: 1px dashed $noticeFontColor;
            color: $noticeFontColor;
            position: relative;
            display: inline-block;
            width: 100%;
            background: $noticeBackgroundColor;
            border-radius: 10px;
            i {
                color: $noticeFontColor;
                font-size: 16px;
                padding-right: 10px;
                vertical-align: middle;
                margin-top: 4px;
                display: inline-block;
                -webkit-font-smoothing: antialiased;
            }
            .notice-content {
                display: initial;
                vertical-align: middle;
            }
        }
        .article{
            padding: .45rem 0;
            .article-header{
                position: relative;
                .article-title {
                    display: block;
                    font-size: .34rem;
                    font-weight: 700;
                    margin-bottom: .3rem;
                    color: $fontColor;
                    padding-left: .2rem;
                    border-left: 4px solid $fontColor;
                    .article-topping {
                        display: inline-block;
                        margin-left: .1rem;
                        padding: 0 .1rem;
                        border-radius: 4px;
                        font-style: normal;
                        font-size: .12rem;
                        background-color: #ea434a;
                        color: #fff;
                        height: .22rem;
                        line-height: .24rem;
                        transform: translateY(-8px);
                    }
                }
            }
            .article-meta{
                i{
                    padding-right: .1rem;
                }
                a{
                    color:$fontColor;
                    margin-right: .15rem;
                }
                .zan{
                    cursor: pointer;
                    margin-right: 0;
                }
                .yizan{
                    color:#2D93CA;
                }
                .article-category{
                    display: inline-block;
                    margin-left: .15rem;
                }
            }
            .article-entry {
                transition: all .5s;
                margin-top: .1rem;
                padding: 0 .2rem .2rem;
                border: 1px dashed #dfdede;
                blockquote {
                    display: block;
                    padding: 0 .15rem;
                    overflow: auto;
                    word-break: break-all;
                    border-left: .03rem solid #cce5ff;
                    margin: .15rem 0;
                    color: $blockquoteColor;
                }
                a{
                    color: $hrefColor;
                    text-decoration: underline;
                }
                p{
                    margin: .15rem 0;
                }
                img,video {
                    transition: all .3s;
                    max-width: 100%;
                    height: auto;
                    display: block;
                    margin: auto;
                }
                .article-more-link {
                    display: inline-block;
                    float: right;
                    background-color: #403e3e;
                    padding: .05rem .1rem;
                    border-radius: 4px;
                    color: #fff!important;
                    transition: all .4s;
                }
                .article-more-link:hover {
                    background-color: #5f5d5d;
                }
            }
            .article-footer{
                margin-top: .1rem;
                .article-tag-list {
                    list-style: none;
                    padding-left: 0;
                    margin: 0;
                    .article-tag-list-item {
                        display: inline-block;
                        vertical-align: bottom;
                        padding-right: .1rem;
                        .article-tag-list-link {
                            font-size: 11px;
                            display: block;
                            color: #fff;
                            float: left;
                            height: .18rem;
                            line-height: .18rem;
                            padding: 0 8px;
                            position: relative;
                            border-radius: 9px;
                            background-color: #5d5a5a;
                        }
                    }
                }
            }
            .article-entry:hover{
                box-shadow: 0 4px 12px 12px rgba(7,17,27,.15);
                img{
                    transform: scale(1.01);
                }
            }
            .article-meta:after, .article-meta:before, .article-entry:after, .article-entry:before {
                content: "";
                display: table;
                clear: both;
            }
        }
        .article:not(:last-child){
            border-bottom: .1px solid #ddd;
        }
    }
}
@media (max-width: 1000px){
    .home{
        .banner{
            .site-info{
                top: 6.28%;
            }
        }
    }
}

@media (max-width: 768px){
    .home{
        .banner{
            .site-info{
                .site-title{
                    font-size: .4rem;
                }
            }
            .bannerDown{
                i{
                    font-size: .27rem;
                }
            }
        }
    }
}
